<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="订单管理">
<style>
    .control-group p {
        margin: 1px 0 0 20px;
        float: left;
        font-size: 13px;
        text-align: left;
        line-height: 30px;
    }

    .order-details {
        width: 100%;
    }

    .order {
        width: 60%;
        float: left;
    }

    .panel-header {
        color: #333333;
        background-color: #f5f5f5;
        border-color: #dddddd;
    }

    .button-large {
        padding: 10px 30px;
        font-size: 16px;
    }

    #content {
        margin-top: 8px;
    }
</style>
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="form-horizontal">
                <div class="panel-header">
                    <a href="${basepath}/rest/manage/order/toList">返回上一级</a>
                </div>
                <div class="panel-body">

                    <h3>订单详情</h3>
                    <hr>
                    <div class="order-details">
                        <div class="order">
                            <div class="control-group">
                                <label class="control-label">
                                    订单号：
                                </label>
                                <p>${e.orderID!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    订单时间：
                                </label>
                                <p>${e.createTime!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    买家帐号：
                                </label>
                                <p>${e.userName!}</p>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    订单状态：
                                </label>
                                <p id="typeBtn"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <h3>菜单清单
                    <#--<a class="button button-primary pull-right" style="height:20px" id="addBtn">增加</a>-->
                    <#--<a class="button button-primary pull-right" style="height:20px;margin-right: 10px;">打印</a>-->
                    </h3>
                    <hr>
                    <div id="grid"></div>
                </div>
                <div class="panel-body">
                    <h3>费用信息</h3>
                    <hr>
                    <form id="detailForm" class="form-horizontal">
                        <div class="control-group ptotal-div">
                            <label class="control-label ">
                                <s>*</s>
                                预计支付：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8"
                                       disabled value="${e.ptotal!}">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">
                                <s>*</s>
                                使用优惠：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8" value="无" id="discount"
                                       disabled>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">
                                <s>*</s>
                                实际支付：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8" value="${e.ptotal!}"
                                       disabled>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="panel-body hide info">
                    <h3>物流信息</h3>
                    <hr>
                    <form id="infoForm" class="form-horizontal">
                        <div class="control-group ptotal-div">
                            <label class="control-label ">
                                <s>*</s>
                                物流公司：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8 " id="compony"
                                        name="expressCompany"
                                       value="${e.expressCompany!}">
                            </div>
                        </div>

                        <div class=" control-group">
                            <label class="control-label">
                                <s>*</s>
                                订单号：
                            </label>
                            <div class="controls">
                                <input type="number" class="control-text span-width span8 " id="number"
                                        name="expressNum"
                                       value="${e.expressNum!}">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">
                                <s>*</s>
                                发货人：
                            </label>
                            <div class="controls">
                                <input type="text" class="control-text span-width span8"
                                        name="consigner" id='man' value="${e.consigner!}">
                            </div>
                        </div>
                        <div class="centered hide send">
                            <a class="button  button-large  button-success tosend">确认发货</a>
                        </div>
                        <div class="centered hide finish">
                            <a class="button  button-large  button-success tofinish">确认收货</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        var Grid = BUI.Grid,
                Store = BUI.Data.Store,
                columns = [
                    {title: '商品名称', dataIndex: 'productName', elCls: 'center', width: '20%'},
                    {
                        title: '商品图片',
                        dataIndex: 'productPicture',
                        elCls: 'center',
                        width: '20%',
                        renderer: function (value) {
                            return '<img src="/' + value + '" style="width:110px;height:110px"/>';
                        }
                    },
                    {title: '商品规格', dataIndex: 'specInfo', elCls: 'center', width: '20%'},
                    {title: '下单数量', dataIndex: 'number', elCls: 'center', width: '20%'},
                    {title: '商品单价', dataIndex: 'price', elCls: 'center', width: '20%'}
                ];
        var store = new Store({
                    url: '/rest/manage/order/selectOrderDetail',
                    autoLoad: true, //自动加载数据
                    params: { //配置初始请求的参数
                        length: '10',
                        orderID: '${e.orderID!}'
                    },
                    pageSize: 10,	// 配置分页数目
                    root: 'data',
                    totalProperty: 'total'
                }),
                grid = new Grid.Grid({
                    render: '#grid',
                    columns: columns,
                    width: '100%',
                    loadMask: true, //加载数据时显示屏蔽层
                    store: store
                });
        grid.render();
        $('#btnShow').on('click', function () {
            dialog.show();
        });
        $('.tosend').click(function () {
            if ($('#compony').val() && $('#number').val() && $('#man').val()) {
                var obj = {
                    id: '${e.id!}',
                    status: 'send',
                    expressCompany: $('#compony').val(),
                    expressNum: $('#number').val(),
                    consigner: $('#man').val()
                };
                tochange(obj)
            } else {
                BUI.Message.Alert('请填写完整信息', 'error');
            }

        });
        $('.tofinish').click(function () {
            var obj = {
                id: '${e.id!}',
                status: 'finish',
            };
            tochange(obj)
        });

        function tochange(obj) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/rest/manage/order/updateJson',
                data: obj,
                success: function () {
                    location.reload()
                }
            })
        }

        function getVoucher(id) {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: '/rest/manage/voucher/selectOrderVoucherList',
                data: {
                    voucherID: id
                },
                success: function (res) {
                    if (res.data != '' && res.data != null) {
                        $('#discount').val(res.data.join(','));
                    }
                }
            })
        }

        var status = '${e.status!}', type, voucherID = '${e.voucherID!}';
        switch (status) {
            case 'init':
                type = '待付款';
                break;
            case 'pass':
                type = '待发货';
                $('.info,.send').show();
                break;
            case 'send':
                type = '待收货';
                $('.info,.finish').show();
                break;
            case 'finish':
                type = '已完成';
                $('.info').show();
                break;
        }
        $('#typeBtn').text(type);
        getVoucher(voucherID)
    </script>
</@page.pageBase>
